<template>
	<view class="order">
		<view class="order-tabs">
			<!-- #ifdef H5 -->
			<u-tabs :list="list" @change="tabChange" lineWidth="30" lineColor="#ff6600" :activeStyle="{
			        color: '#ff6600',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#606266',
			        transform: 'scale(1)'
			    }" itemStyle="padding-left: 50px; padding-right: 50px; height: 34px;">
			</u-tabs>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<u-tabs :list="list" @change="tabChange" lineWidth="30" lineColor="#ff6600" :activeStyle="{
			          color: '#ff6600',
			          fontWeight: 'bold',
			          transform: 'scale(1.05)'
			      }" :inactiveStyle="{
			          color: '#606266',
			          transform: 'scale(1)'
			      }" itemStyle="padding-left: 32rpx; padding-right: 32rpx;">
			</u-tabs>
			<!-- #endif -->
		</view>
		<view class="son">
			<!-- 判断总收入是否为空，如果为空则显示income的内容 -->
			<view class="income" v-if="orderList.length === 0">
				<u-icon name="file-text-fill" size="150" color="#ffc2c2"></u-icon>
				<text>暂无收入</text>
			</view>
			<!-- 如果总收入不为空，则根据currentTab显示对应的内容 -->
			<view v-else>
				<view v-if="currentTab===0">
					<totalIncome :moneyList='orderList' />
				</view>
				<view v-if="currentTab === 1">
					<thisMonth :moneyList='orderList' />
				</view>
				<view v-if="currentTab === 2">
					<unsettled :moneyList='orderList' />
				</view>
				<view v-if="currentTab === 3">
					<settled :moneyList='orderList' />
				</view>
				<view v-if="currentTab === 4">
					<aggregate :moneyList='orderList' />
				</view>
			</view>
		</view>
		<withdraw v-show="false" :moneyList='orderList' />
	</view>
</template>

<script>
	// 引入你的组件
	import totalIncome from '@/components/totalIncome/totallncome.vue';
	import withdraw from '@/pages/content/withdraw/withdraw.vue';
	import thisMonth from '@/components/thisMonth/thisMonth.vue';
	import unsettled from '@/components/unsettled/unsettled.vue';
	import settled from '@/components/settled/settled.vue';
	import aggregate from '@/components/aggregate/aggregate.vue';
	export default {
		components: {
			totalIncome,
			thisMonth,
			unsettled,
			settled,
			aggregate,
			withdraw
		},
		data() {
			return {
				show: true,
				showCome: false,
				list: [{
					name: '总收入'
				}, {
					name: '当月',
				}, {
					name: '未结算',
				}, {
					name: '已结算'
				}, {
					name: '汇总'
				}],
				currentTab: 0, // 默认激活的tab索引
				orderList: [{
					incomeTime: '2024-03-13 15:20',
					thisIncome: 380,
					orderNumber: '34567887600'
				}, {
					incomeTime: '2024-03-13 15:20',
					thisIncome: 300,
					orderNumber: '34567887600'
				}, ]
			}
		},
		methods: {
			tabChange(index) {
				console.log('tabChange called with index:', index);
				this.currentTab = index.index; // 假设currentTab是你需要更新的变量
				this.show = false
			}
		},
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}

	.order {
		width: 100%;
	}

	/* #ifdef MP-WEIXIN */
	.order-tabs {
		width: 100%;
		background-color: #fff;
		height: 85rpx;
		line-height: 85rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-content: space-around;
		flex-wrap: wrap;
	}

	/* #endif */
	/* #ifdef H5 */
	.order-tabs {
		width: 100%;
		margin: auto;
		background-color: #fff;
		height: 42px;
		line-height: 42px;
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		align-content: space-around;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
	}

	/* #endif */
	.son {
		width: 90%;
		margin: auto;
	}

	.income {
		width: 100%;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 120rpx;
	}

	.income text {
		color: #ccc;
	}
</style>